<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item >宿舍检查</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index/healthy/tianxie' }">查寝情况</el-breadcrumb-item>
        </el-breadcrumb>

        <el-row class="margintop20">
            <el-col>
                <a id="dlink"  style="display:none;"></a>
                <el-button type="success" @click="showDialog">宿舍情况填写</el-button>
                <el-button type="danger" @click="exportExcel('mytable','09-14','shuju.xls')">数据导出</el-button>
            </el-col>

            <el-col>
                <el-table
                    :data="data.tianxieList"
                    style="width: 100%"
                    class="tableinfo margintop20"
                    :header-cell-style="{'text-align':'center'}"
                    :cell-style="{'text-align':'center'}"
                    :row-class-name="tableRowClassName"
                    id="mytable"
                >
                    <el-table-column label="#" type="index"></el-table-column>
                    <el-table-column label="寝室号" prop="roomname">
                        <template slot-scope="scope">
                            {{scope.row.roomname}}
                        </template>
                    </el-table-column>
                    <el-table-column label="查寝时间" prop="time" sortable>
                        <template slot-scope="scope">
                            {{scope.row.time | timeFormat('MM-DD HH:mm:ss')}}
                        </template>
                    </el-table-column>
                    <el-table-column label="缺勤" prop="queqin">
                        <template slot-scope="scope">
                            {{scope.row.queqin}}
                        </template>
                    </el-table-column>
                    <el-table-column label="是否缺勤" >
                        <template slot-scope="scope">
                            <el-tag effect="plain" type="danger" v-if="scope.row.queqin>0">有人缺勤</el-tag>
                            <el-tag effect="plain" type="success" v-else >无人缺勤</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="卫生" prop="weisheng" sortable>
                        <template slot-scope="scope">
                            {{scope.row.weisheng}}
                        </template>
                    </el-table-column>
                    <el-table-column label="卫生状态" >
                        <template slot-scope="scope">
                            <el-tag effect="plain" type="danger" v-if="scope.row.weisheng<60">脏乱</el-tag>
                            <el-tag effect="plain" type="warning" v-if="scope.row.weisheng>=60&&scope.row.weisheng<80">良好</el-tag>
                            <el-tag effect="plain" type="success" v-if="scope.row.weisheng>=80&&scope.row.weisheng<=100">优秀</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="原因" prop="yuanyin">
                        <template slot-scope="scope">
                            {{scope.row.yuanyin}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope" v-if="scope.row.mobile==mobile">
                            <el-button  @click="showUpdate(scope.row)" type="info" icon="el-icon-edit" circle ></el-button>
                            <el-popconfirm
                                confirmButtonText='好的'
                                cancelButtonText='不用了'
                                icon="el-icon-info"
                                iconColor="red"
                                title="你确定要删除吗?"
                                @onConfirm="delTheList(scope.row)"
                                >
                                <el-button slot="reference" type="danger" icon="el-icon-delete" circle></el-button>
                            </el-popconfirm>               
                        </template>
                    </el-table-column>

                </el-table>
            </el-col>
        </el-row>

        <el-dialog
            title="添加宿舍查寝情况"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
            >
            <el-form 
                :model="form" 
                :rules="rules"
                ref="myform" 
                label-width="100px"
                label-position="right" 
                class="myform">
                <el-form-item label="寝室号" prop="roomname">
                    <el-select v-model="form.roomname" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="缺勤人数" prop="queqin">
                    <el-input v-model="form.queqin" ></el-input>
                </el-form-item>
                <el-form-item label="卫生情况" prop="weisheng">
                    <el-input v-model="form.weisheng" ></el-input>
                </el-form-item>
                <el-form-item label="扣分原因" prop="yuanyin">
                    <el-input type="textarea" v-model="form.yuanyin" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addTianxie">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="修改宿舍查寝情况"
            :visible.sync="updateVisible"
            width="30%"
            :before-close="updateClose">
            <el-form 
                :model="update" 
                :rules="rules"
                ref="updateform" 
                label-width="100px"
                label-position="right" 
                class="myform">
                <el-form-item label="寝室号" prop="roomname">
                    <el-select v-model="update.roomname" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="缺勤人数" prop="queqin">
                    <el-input v-model="update.queqin" ></el-input>
                </el-form-item>
                <el-form-item label="卫生情况" prop="weisheng">
                    <el-input v-model="update.weisheng" ></el-input>
                </el-form-item>
                <el-form-item label="扣分原因" prop="yuanyin">
                    <el-input type="textarea" v-model="update.yuanyin" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateTianxie">修 改</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {addtianxie,getmytianxielist,delTheList,updatetianxieone} from "@/api"
import Vue from "vue"
import {mapState,mapMutations} from "vuex"
export default {
    data(){
        return{
            dialogVisible:false,
            updateVisible:false,
            form:{},
            update:{},
            tianxieList:[],
            mobile:localStorage.getItem("mobile"),
            rules:{
                roomname:[
                    {required:true,message:"请选择学生寝室号",trigger:"change"}
                ],
                queqin:[
                    {required:true,message:"请输入缺勤人数",trigger:"blur"},
                    {
                        validator:(rule,value,callback)=>{
                            var reg = /^[0-4]$/;
                            if(reg.test(value)){
                                callback();
                            }else{
                                callback(new Error('请输入正确的缺勤人数'));
                            }
                        },
                        trigger:"blur"
                    }
                ],
                weisheng:[
                    {required:true,message:"请输入卫生情况",trigger:"blur"},
                    {
                        validator:(rule,value,callback)=>{
                            var reg = /^(?:0|[1-9][0-9]?|100)$/;
                            if(reg.test(value)){
                                callback();
                            }else{
                                callback(new Error('请输入正确的卫生分数'));
                            }
                        },
                        trigger:"blur"
                    }
                ],
                yuanyin:[
                    {required:true,message:"请输入扣分原因",trigger:"blur"}
                ],
            },
            options: [{
                value: '1A310',
                label: '1A310'
                }, {
                value: '1A311',
                label: '1A311'
                }, {
                value: '1A312',
                label: '1A312'
                }],
                value: ''
        }
    },
    computed:{
        ...mapState(['data'])
    },
    methods:{
        exportExcel(table, name, filename){   // a download 下载 导出 excle  
            var uri = 'data:application/vnd.ms-excel;base64,',
            template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
            base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) },
            format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) };

            if (!table.nodeType) table = document.getElementById(table)
            var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }

            document.getElementById("dlink").href = uri + base64(format(template, ctx));
            document.getElementById("dlink").download = filename;
            document.getElementById("dlink").click();
        },
        ...mapMutations(['changeTianxieList']),
        updateTianxie(){
            this.$refs.updateform.validate(valid=>{
                if(valid){
                    updatetianxieone({
                        ...this.update
                    }).then(res=>{
                        if(res.type){
                            this.updateVisible=false;
                            var tianxieList = this.data.tianxieList.map((item,idx)=>{
                                if(item._id==this.update._id){
                                    item = {...item,...this.update}
                                }
                                return item;
                            })
                            this.changeTianxieList(tianxieList);
                        }
                    }).catch(err=>{

                    })
                }else{
                    this.$message.error("请完善信息再提交")
                    return false
                }
            })
        },
        showUpdate(row){
            this.updateVisible=true;
            this.update = {...this.form,...row}
        },
        delTheList(row){
            delTheList({
                _id:row._id
            })
            .then(res=>{
                if(res.type){
                    var tianxieList = this.data.tianxieList.filter(item=>item._id!==row._id)
                    this.changeTianxieList(tianxieList);
                }
            })
            .catch(err=>{

            })
        },
        addTianxie(){
            this.$refs.myform.validate(valid=>{
                if(valid){
                    addtianxie({
                        roomname:this.form.roomname,
                        queqin:this.form.queqin,
                        weisheng:this.form.weisheng,
                        yuanyin:this.form.yuanyin
                    })
                    .then(res=>{
                        if(res.type){
                            this.dialogVisible = false;
                            //this.tianxieList = res.result;
                            this.changeTianxieList(res.result);
                            this.from = {}
                        }
                    })
                    .catch(err=>{

                    })
                }else{
                    this.$message.error("请完善信息再提交")
                    return false
                }
            })
        },
        tableRowClassName({row,rowIndex}){
            if(row.queqin > 0){
                return 'warning-row';
            }
            if(row.weisheng < 60){
                return 'danger-row';
            }
            return '';
        },
        updateClose(){
            this.updateVisible = false;
        },
        handleClose(){
            this.dialogVisible = false;
        },
        showDialog(){
            this.dialogVisible = true;
        },
        getlist(params){
            getmytianxielist(params)
            .then(res=>{
                if(res.type){
                    // this.tianxieList = res.result;
                    this.changeTianxieList(res.result);
                }
            })
            .catch(err=>{

            })
        }
    },
    mounted(){
        if(!this.data.tianxieList){
            this.getlist()
        }
    }
}
</script>

<style lang="scss" >
.el-table .warning-row {
    background: rgb(248, 210, 198);
}

.el-table .danger-row {
    background: rgb(230, 229, 229);
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>